<%--
  Created by IntelliJ IDEA.
  User: LuoQing
  Date: 2022/1/7
  Time: 19:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工管理界面</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <style>
        #qx{
            margin-top: -320px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <form class="form-inline">
            <div>
                姓名：<input name="name" class="form-control">
                <input type="button" class="btn btn-primary" id="submit_select" value="查询"/>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-10">
        </div>
        <div class="col-2">
            <button class="btn btn-primary"  data-toggle="modal" data-target="#myModal" onclick="dian('a')">添加员工</button>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="container">
            <table id="table"  class="table table-hover table-bordered">
                <thead>
                <tr align="center">
                    <th>用户编号</th>
                    <th>用户姓名</th>
                    <th>用户级别</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
<%--                <tr align="center">
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                    <td>john@example.com</td>
                    <td><button class="btn btn-info" data-toggle="modal" data-target="#myModal" >xxx</button></td>
                </tr>
                <tr align="center">
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                    <td>john@example.com</td>
                    <td><button class="btn btn-info" data-toggle="modal" data-target="#myModal" >xxx</button></td>
                </tr>
                <tr align="center">
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                    <td>john@example.com</td>
                    <td><button class="btn btn-info" data-toggle="modal" data-target="#myModal">xxx</button></td>
                </tr>--%>
            </table>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">添加员工</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <form id="addyuan" class="container-fluid">
                    <div class="form-group">
                        <label>用户名：</label>
                        <input type="text" name="loginId" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>密码：</label>
                        <div>
                            <input type="text" name="password" class="form-control">
                        </div>
                    </div>
                </form>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>-->
                <button id="up" class="btn btn-primary" onclick="insert()">添加</button>
                <button class="btn btn-warning" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="xgjs">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">修改员工等级</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <form id="xgyuan" class="container-fluid">
                    <div class="form-group">
                        <label>编号：</label>
                        <input type="text" name="id" readonly="readonly" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>用户名：</label>
                        <input type="text" name="loginId" readonly="readonly" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>用户等级：</label>
                        <div>
                            <select name="descn" class="form-control">
                            </select>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button  class="btn btn-primary" onclick="update()">修改</button>
                <button class="btn btn-warning" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="xgpassword">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">修改个人信息</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <form id="userpassword" class="container-fluid">
                    <input  type="hidden" name="id" value="${user.id}"  readonly="readonly" class="form-control xx">
                    <div class="form-group">
                        <label>原用户名：</label>
                        <input type="text" value="${user.loginId}"  readonly="readonly" class="form-control xx">
                    </div>
                    <div class="form-group">
                        <label>输入用户名：</label>
                        <input type="text" name="loginId" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>原密码：</label>
                        <input type="text" value="${user.password}" readonly="readonly" class="form-control xx">
                    </div>
                    <div class="form-group">
                        <label>密码：</label>
                        <input type="password" name="password" class="form-control">
                    </div>
                </form>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button  class="btn btn-primary" onclick="updatepassword()">修改</button>
                <button class="btn btn-warning" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div id="qx" style="float: right">
    <button class='btn btn-primary btn-sm'  data-toggle='modal' data-target='#xgpassword'>修改密码</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/lqym/addUserRole.jsp">设置角色</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/lqym/setCaidan.jsp">设置菜单</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/lqym/setRoot.jsp">设置权限</a>&nbsp;
</div>
</body>
<script src="/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/jquery.form.js"></script>
<script src="/js/jquery.serializejson.js"></script>
<script>
    jia()
    function jia() {
        load()
        queryAllRoles()
    }
    function updatepassword() {
        let serializeJSON = $("#userpassword").serializeJSON();
        $.ajax({
            type:"post",
            url: "http://localhost:8080/suc/updatepassword",
            contentType:"application/json;charset=utf-8",
            data:JSON.stringify(serializeJSON),
            dataType:"json",
            success:function (data) {
                if (data == 1) {
                    alert("修改成功")
                    parent.location.href="/suc/out"
                }
            }, error: function () {
                alert("zhu")
            }
        })
    }
    function insert() {
        let innerText = document.getElementsByClassName("modal-title")[0].innerText;
        let serializeJSON = $("#addyuan").serializeJSON();
        console.log(JSON.stringify(serializeJSON))
        if(innerText=="添加员工"){
            $.ajax({
                type:"post",
                url: "http://localhost:8080/suc/insert",
                contentType:"application/json;charset=utf-8",
                data:JSON.stringify(serializeJSON),
                dataType:"json",
                success:function (data) {
                    if (data == 1) {
                        $("#myModal").modal("hide")
                        $("#table").bootstrapTable("refresh");
                        alert("成功")
                    } else {
                        alert("已存在")
                    }
                }, error: function () {
                    alert("zhu")
                }
            })
        }
    }
   function load() {
       $("#table").bootstrapTable({
           method: "post",
           contentType: "application/json",
           url: "/suc/fingAllUesr",
           striped: true,
           pageNumber: 1,
           pagination: true,
           sidePagination: "server",
           pageSize: 2,
           pageList: [2, 4, 6, 8],
           queryParams: function (param) {
               return {
                   page: (param.offset / param.limit) + 1,
                   num: param.limit,
                   name: $("[name=name]:eq(0)").val(),
               }
           },
           columns: [
               {title: "编号", field: "sysUsers.id", align: "center"},
               {title: "用户", field: "sysUsers.loginId", align: "center"},
               {title: "等级", field: "sysRoles.descn", align: "center"},
               {
                   title: "操作", field: "sysUsers.id", align: "center",
                   formatter: function (value, row) {
                       var btn1 = "<button class='btn btn-primary btn-sm' onclick='dian2(this)' data-toggle='modal' data-target='#xgjs'>编辑</button>";
                       var btn2 = "<button class='btn btn-warning btn-sm' onclick='del(this," + value + ")'>开除</button>";
                       return btn1 + "&nbsp;" + btn2;
                   }
               },
           ]
       })
       $("#submit_select").click(function () {
           $("#table").bootstrapTable("refresh");
       })
   }
    function del(xx,bb) {
        if(confirm("确实要删除吗？")){
            $.ajax({
                type:"post",
                url:"/suc/delUser",
                data:{
                    id:bb,
                },success:function (data) {
                    if(data==1){
                        alert("已经删 除！");
                        xx.parentNode.parentNode.remove()
                    }
                }
            })
        }else {
            alert("已经取消了删除操作");
        }
    }
    function dian(xx) {
        if(xx=="a"){
            document.getElementsByClassName("modal-title")[0].innerText="添加员工"
            let elementsByClassName = document.getElementsByClassName("form-group");
            for (let i=0;i<elementsByClassName.length;i++){
                elementsByClassName[i].querySelectorAll("input")[0].innerHTML="";
            }
        }
    }
    function dian2(cc) {
        $("[name=id]").val(cc.parentNode.parentNode.querySelectorAll("td")[0].innerHTML)
        $("[name=loginId]:eq(1)").val(cc.parentNode.parentNode.querySelectorAll("td")[1].innerHTML)
        for (let i=0;i<document.getElementsByName("descn")[0].querySelectorAll("option").length;i++){
            document.getElementsByName("descn")[0].querySelectorAll("option")[i].innerHTML==cc.parentNode.parentNode.querySelectorAll("td")[2].innerHTML?document.getElementsByName("descn")[0].querySelectorAll("option")[i].selected="selected":""
        }
    }
    function queryAllRoles() {
        $.getJSON("/suc/selectAllRoles",function (data) {
            $("[name=descn]").empty()
            for(let i=0;i<data.length;i++){
                    $("[name=descn]").append(" <option value="+data[i].rid+">"+data[i].descn+"</option>")
            }
        })
    }
    function update() {
        let id = $("[name=id]").val();
        let descn = $("[name=descn]").val();
        $.getJSON("/suc/update",{id:id,descn:descn},function (data) {
            if(data==1){
                alert("修改成功")
                $("#xgjs").modal("hide")
                 $("#table").bootstrapTable("refresh");
            }else {
                alert("失败")
            }
        })
    }
</script>
</html>
